<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/6/1
  Time: 8:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/css.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/vendor/bootstrap/css/bootstrap.min.css">
</head>
<style>
    .navigateBar1{
        list-style: none;
    }
    .navigateBar1 li{
        float: left;
        width: 50px;
    }
</style>
<body>
    <h1 class="text-center">查询用户</h1>
      <form class="userForm" style="margin-top: 30px;margin-left: 30px">
        <input type="number" placeholder="id" name="imgid" id="imgid">
        <input type="text" placeholder="url" name="imgurl" id="imgurl">
        <input type="text" placeholder="表" name="typename" id="typename">
        <input type="number" placeholder="评价id" name="typeid" id="typeid">
        <input type="text" placeholder="链接地址" name="typeurl" id="typeurl">
      </form>
            <table class="table table-bordered" border="1px solid"width="100%" style="margin-top: 20px;line-height: 30px;text-align: center;">
              <thead>
              <tr>
                <td>id</td>
                <td>url</td>
                <td>表</td>
                <td>评价id</td>
                <td>链接地址</td>
                <td colspan="2">操作</td>
              </tr>
              </thead>
              <tbody class="hm"></tbody>
            </table>
    每页显示
    <select name="pageSize" id="pageSize">
        <option value="3">3</option>
        <option value="6">6</option>
        <option value="10">10</option>
    </select>
    条----

    当前第<sapn class="pages"></sapn>页
    <div class="navigateBar btn">
    </div><br>
      <h1 class="text-center">添加用户</h1>
      <form action="${pageContext.request.contextPath}/insert" method="post" enctype="multipart/form-data" class="text-center">
          图片：<input type="file" name="img" id="simg">
          <input type="text" placeholder="表" name="typename" id="name">
          <input type="number" placeholder="评价id" name="typeid" id="uid">
          <input type="text" placeholder="链接地址" name="typeurl" id="url">
          <input type="submit" value="添加" id="a"/>
      </form>

<%--      <hr>--%>
<%--      <h1 class="text-center">商品表</h1>--%>
<%--      <table class="msgBox table-hover" border="1px solid"width="100%" style="margin-top: 20px;line-height: 30px;text-align: center">--%>
<%--          <thead>--%>
<%--          <tr>--%>
<%--              <th>物品名称</th>--%>
<%--              <th>单价</th>--%>
<%--              <th>数量</th>--%>
<%--              <th>折扣</th>--%>
<%--              <th>重量</th>--%>
<%--              <th>分类</th>--%>
<%--              <th>联系方式</th>--%>
<%--              <th>操作</th>--%>
<%--          </tr>--%>
<%--          </thead>--%>
<%--          <tbody class="sp"></tbody>--%>
<%--      </table>--%>
<%--      <ul class="navigateBar1">--%>

<%--      </ul>--%>

<%--      <br>--%>
<%--      每页显示<select name="pageSize" id="pageSize1">--%>
<%--          <option value="3">3</option>--%>
<%--          <option value="5">5</option>--%>
<%--          <option value="10">10</option>--%>
<%--      </select>条--%>
<%--    <hr>--%>


</body>
<script src="${pageContext.request.contextPath}/vendor/jquery/jquery.min.js"></script>
  <script>
    $(function(){
      getImages();
      x();
      $(".userForm").change(function(){
        getImages();
      })
      $("#pageSize").change(function(){
        getImages();
      })
        $("#simg,#name,#uid,#url").change(function () {
            $("#a").attr("disabled", false);
        })
    })
    function x() {
        $("#a").click(function(){
            if ($("#simg").val() == "") {
                $("#a").attr("disabled", "disabled");
                alert("图片不能为空");
            } else if($("#name").val() == ""){
                $("#a").attr("disabled", "disabled");
                alert("商品名称不能为空");
            } else if($("#uid").val() == ""){
                $("#a").attr("disabled", "disabled");
                alert("用户名ID不能为空");
            } else if($("#url").val() == ""){
                $("#a").attr("disabled", "disabled");
                alert("连接路径不能为空");
            }
        })
    }
    function getImages(pageNum){
      $(".hm").empty();
      var url = "${pageContext.request.contextPath}/getImages";
      var imgid = $("#imgid").val();
      var imgurl = $("#imgurl").val();
      var typename = $("#typename").val();
      var typeid = $("#typeid").val();
      var typeurl = $("#typeurl").val();
      var pageSize = $("#pageSize").val();
      var data = {"imgid":imgid,"imgurl":imgurl,"typename":typename,"typeid":typeid,"typeurl":typeurl,"pageSize":pageSize,"pageNum":pageNum}
      $.ajax({
        url:url,
        method:"post",
        data:data,
        success:function(data){
          var images = data.list;
          for(var i=0;i<images.length;i++){
            var $tr = $("<tr>");
            $(".hm").append($tr);
            var $imgid = $("<td>");
            var $imgurl = $("<td>");
              var $img=$("<img src='"+images[i].imgurl+"' width='30px' height='30px'>");
              $imgurl.append($img);
            var $typename = $("<td>");
            var $typeid = $("<td>");
            var $typeurl = $("<td>");
            var $option = $("<td>");
            var $btn = $("<button>删除</button>");
            $btn.attr("onclick",'deleteImages('+images[i].imgid+')');
            $option.append($btn);
            $imgid.html(images[i].imgid);

              $typename.html(images[i].typename);
              $typeid.html(images[i].typeid);
             $typeurl.html(images[i].typeurl);
            $tr.append($imgid).append($imgurl).append($typename).append($typeid).append($typeurl).append($option);
          }
          makePageBar(data);
        }
      })
    }

    function deleteImages(imgId) {
      var url = "${pageContext.request.contextPath}/images/"+imgId;
      $.ajax({
        url:url,
        method: "DELETE",
        data:{"imgId":imgId},
        success:function(data){
          if(data==1){
            getImages();
          }
        }
      })
    }

    function makePageBar(data){
      $(".navigateBar").empty();
      var isFirstPage = data.isFirstPage;
      var isLastPage = data.isLastPage;
      var hasNextPage = data.hasNextPage;
      var hasPreviousPage = data.hasPreviousPage;
      var navigatePageNums = data.navigatepageNums;
      var currentPageNum = parseInt(data.pageNum);
      $(".pages").html(currentPageNum);
      if(isFirstPage!=true){
          $botton=$("<button class='btn btn-default' type='submit' />");
        // $li = $("<li></li>");
        // $a = $('<a href="#">首页</a>');
        // $li.append($a);
          $botton.attr("onclick","getImages("+1+")").text("首页");
        $(".navigateBar").append($botton);
      }
      if(hasPreviousPage == true){
        var previousPageNum = currentPageNum-1;
          $botton=$("<button class='btn btn-default' type='submit' />");
        // $li = $("<li></li>");
        // $a = $('<a href="#"></a>');
        // $li.append($a);
          $botton.attr("onclick","getImages("+previousPageNum+")").text("上一页");
        $(".navigateBar").append($botton);
      }
      for(var i=0 ;i< navigatePageNums.length; i++){
        var pageNum = navigatePageNums[i];
          $botton=$("<button class='btn btn-default' type='submit'/>");
        // $li = $("<li></li>");
        // $a = $('<a href="#"></a>');
        // $li.append($a);
          $botton.attr("onclick","getImages("+pageNum+")").text(pageNum);
        $(".navigateBar").append($botton);
      }
      if(hasNextPage == true){
        var nextPagenum = currentPageNum+1;
          $botton=$("<button class='btn btn-default' type='submit' />");
        // $li = $("<li></li>");
        // $a = $('<a href="#"></a>');
        // $li.append($a);
          $botton.attr("onclick","getImages("+nextPagenum+")").text("下一页");
        $(".navigateBar").append($botton);
      }
      if(isLastPage!=true){
        var lastPagenum = data.pages;
          $botton=$("<button class='btn btn-default' type='submit' />");
        // $li = $("<li></li>");
        // $a = $('<a href="#">首页</a>');
        // $li.append($a);
          $botton.attr("onclick","getImages("+lastPagenum+")").text("尾页");
        $(".navigateBar").append($botton);
      }
    }
  </script>
<script>
    $(function(){
        getGoods();
        $(".userForm").change(function () {
            getGoods();
        })
        $("#pageSize").change(function () {
            getGoods();
        })
        $("#pageNums").change(function () {
            pageChoose();
        })

        $("#spgl").click(function () {
            getGoods();
        })
    })
    function getGoods(pageNum){
        $(".sp").empty();
        var url="${pageContext.request.contextPath}/getGoods";
        var gname=$("#gname").val();
        var gprice=$("#gprice").val();
        var gnum=$("#gnum").val();
        var discount=$("#discount").val();
        var weight=$("#weight").val();
        var gclassify=$("#gclassify").val();
        var gphone=$("#gphone").val();
        var pageSize=$("#pageSize1").val();

        var data={"gname":gname,"gprice":gprice,"gnum":gnum,"discount":discount,"weight":weight,"gclassify":gclassify,"gphone":gphone,"pageSize":pageSize,"pageNum":pageNum}

        $.ajax({
            url:url,
            method:"POST",
            data:data,
            success:function(data){
                var goods=data.list;
                for(var i=0;i<goods.length;i++){
                    var $tr=$("<tr>");
                    $(".sp").append($tr);
                    var $gname=$("<td>");
                    var $gprice=$("<td>");
                    var $gnum=$("<td>");
                    var $discount=$("<td>");
                    var $weight=$("<td>");
                    var $gclassify=$("<td>");
                    var $gphone=$("<td>");
                    var $option=$("<td>");
                    var $btn=$("<button>删除</button>")
                    $btn.attr("onclick",'deleteUser('+goods[i].gid+')');
                    $option.append($btn);
                    $gname.html(goods[i].gname);
                    $gprice.html(goods[i].gprice);
                    $gnum.html(goods[i].gnum);
                    $discount.html(goods[i].discount);
                    $weight.html(goods[i].weight);
                    $gclassify.html(goods[i].gclassify);
                    $gphone.html(goods[i].gphone);
                    $tr.append($gname).append($gprice).append($gnum).append($discount).append($weight).append($gclassify).append($gphone).append($option);
                }

                makePageBar1(data);
            }
        })
    }
    function deleteUser(gid) {
        var url="${pageContext.request.contextPath}/Goods/"+gid;
        $.ajax({
            url:url,
            method: "DELETE",
            success:function (data) {
                if(data==1){
                    alert("删除成功");
                    getGoods();
                }
            }
        })
    }
    function makePageBar1(data){

        $(".navigateBar1").empty();
        var isFirstPage=data.isFirstPage;
        var isLastPage=data.isLastPage;
        var hasPreviousPage=data.hasPreviousPage;
        var hasNextPage=data.hasNextPage;
        var currentPageNum=parseInt(data.pageNum);
        var navigatepageNums=data.navigatepageNums;
        if(isFirstPage!=true){
            $li=$("<li></li>");
            $a=$("<a href='#'></a>");
            $li.append($a);
            $a.attr("onclick","getGoods("+1+")").text("首页");
            $(".navigateBar1").append($li);
        }

        if(hasPreviousPage==true){
            var previousPageNum=currentPageNum-1;
            $li=$("<li></li>");
            $a=$("<a href='#'></a>");
            $li.append($a);
            $a.attr("onclick","getGoods("+previousPageNum+")").text("上一页");

            $(".navigateBar1").append($li);
        }

        for(var i=0;i<navigatepageNums.length;i++){
            var pageNum=navigatepageNums[i];
            $li=$("<li></li>");
            $a=$("<a href='#'></a>");
            $li.append($a);
            $a.attr("onclick","getGoods("+pageNum+")").text(pageNum);
            $(".navigateBar1").append($li);
        }

        if(hasNextPage==true){
            var hasNextPageNum=currentPageNum+1;
            $li=$("<li></li>");
            $a=$("<a href='#'></a>");
            $li.append($a);
            $a.attr("onclick","getGoods("+hasNextPageNum+")").text("下一页");

            $(".navigateBar1").append($li);
        }
        if(isLastPage!=true){
            var lastPageNum=data.pages;
            $li=$("<li></li>");
            $a=$("<a href='#'></a>");
            $li.append($a);
            $a.attr("onclick","getGoods("+lastPageNum+")").text("尾页");
            $(".navigateBar1").append($li);
        }
    }
</script>
</html>
